<template>
  <view class="sku-box">
    <image
      class="close-icon"
      :src="ossImg('others/goods/close.png')"
      @click.stop="emits('close')"
    />
    <view class="goods">
      <image class="cover" :src="product.imageUrl" />
      <view>
        <view class="goods-title">
          {{ product.name || product.productName }}
        </view>
        <view class="goods-price">
          <view class="price">{{
            currentPrice || product.productSkuPrice || 0
          }}</view>
        </view>
      </view>
    </view>
    <view class="goods-sku">
      <label>规格</label>
      <view class="sku-list">
        <view
          v-for="sku in product.productSkus"
          :key="sku.id"
          :class="{
            current: _value.productSkuId === sku.id,
            disabled: sku.stock === 0,
          }"
        >
          <template v-for="item in sku.spData" :key="item.key">
            <text @click.stop="skuChange(sku, item)">
              {{ item.key + "*" + item.value }}</text
            >
          </template>
        </view>
      </view>
    </view>
    <view class="goods-count flex justify-between items-center">
      数量：
      <big-stepper v-model:value="_value.quantity" />
    </view>
    <view class="sku-confirm">
      <button @click.stop="handleConfirm">
        {{ chooseType === "confirm" ? "立即购买" : "加入购物车" }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, ref, defineEmits, watch } from "vue";
import BigStepper from "@/components/big-stepper";
import { message, ossImg } from "@/utils/utils";

const emits = defineEmits(["confirm", "close", "skuChange"]);
const props = defineProps({
  product: {
    type: Object,
    default: () => ({}),
  },
  chooseType: {
    type: String,
    default: () => "confirm",
  },
});

watch(
  () => props.product,
  () => {
    console.log("监听porps");
    currentPrice.value = props.product.productSkuPrice;
    _value.value.productSkuId = props.product.productSkuId;
    _value.value.quantity = props.product.quantity;
  }
);

const currentPrice = ref(0);
const _value = ref({
  productSkuId: "",
  quantity: 1,
});

const skuChange = (sku, item) => {
  if (sku.stock === 0) return;
  console.log(sku, item);
  _value.value.productSkuId = sku.id;
  currentPrice.value = sku.price;
  emits("skuChange", item);
};

const handleConfirm = () => {
  if (!_value.value.productSkuId && props.product.productSkus.length !== 0)
    return message("请选择商品规格");
  emits("confirm", _value.value);
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.sku-box {
  padding: 20px 16px;
  box-sizing: border-box;
  position: relative;

  .close-icon {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 17px;
    right: 18px;
  }

  .goods-sku {
    padding-top: 28px;
    color: #262626;

    label {
      line-height: 1;
      margin-bottom: 16px;
      font-size: 14px;
      display: block;
    }

    .sku-list {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 5px;

      view {
        padding: 8px;
        font-size: 14px;
        line-height: 1;
        background: #f0f1f3;
        border-radius: 2px;
        margin: 0 12px 12px 0;

        &.current {
          background-color: @primary-color;
          color: white;
        }

        &.disabled {
          color: #d2d1d1;
          background-color: #f0f1f3;
        }
      }
    }
  }

  .goods-count {
    border-top: 1px solid #eeeeee;
    padding: 8px 0 13px 0;
    box-sizing: border-box;
    line-height: 1;
    font-size: 14px;
  }

  .sku-confirm {
    padding: 20px 22px 0 22px;
    box-sizing: border-box;

    button {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #0058c6;
      border-radius: 20px;
      color: white;
      font-size: 16px;

      &::after {
        border: none;
      }
    }
  }
}

.goods {
  display: flex;
  align-items: center;
  height: 68px;

  .cover {
    width: 68px;
    height: inherit;
    margin-right: 10px;
  }

  & > view {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .goods-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #222222;
    font-size: 14px;
  }

  .goods-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .price {
      color: @primary-color;
      font-size: 16px;
      font-weight: normal;
      position: relative;
      letter-spacing: 1px;

      &::before {
        content: "¥";
        font-size: 12px;
      }
    }
  }
}
</style>
